import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {Icon, Row, Col, Form, Input, DatePicker, Button, Cascader, Table} from 'antd';
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;

import './less/courseware.less';

const data = [{
    key: '1',
    name: '课件名称',
    age: 32,
    selected:false,
    address: '2016-12-03',
    }, {
    key: '2',
    name: '课件名称',
    age: 42,
    selected:false,
    address: '2016-12-03',
    }, {
    key: '3',
    name: '课件名称',
    age: 32,
    selected:false,
    address: '2016-12-03',
}];

class CourseWare extends React.Component {
  constructor(props){
      super(props);
      this.state = {
          dataSource:[]
      }
  }
  componentDidMount(){
      this.setState({
          dataSource:[...data]
      })
  }
  render(){
    const columns = [{
        title: '课件名称',
        dataIndex: 'name',
        width:500,
        render: (text,record,index) => {
          let _component = null;
          if(record.selected){
              _component =
                <span style={{marginLeft:100}}>
                    <a href="javascript:void(0)">
                      <Icon type="share-alt" style={{marginRight:5,fontSize:14}}/>
                      分享
                    </a>
                    <a href="javascript:void(0)" style={{color:'#ff3b30',marginLeft:15,fontSize:14}}>删除</a>
                </span>
          }
          return (
            <span>
              <a href="#"><Icon type="file" style={{color:'#ff5a5a',fontSize:20,marginRight:10}}/>{text}</a>
              {_component}
            </span>
          )
        },
        }, {
        title: '课件大小',
        dataIndex: 'age',
        }, {
        title: '修改日期',
        dataIndex: 'address',
    }];

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
          let _data = this.state.dataSource;
          _data.map((item,index)=>{
              _data[index].selected = false;
          })
          selectedRows.map(ele=>{
              _data.map((item,index)=>{
                  if(item.key == ele.key){
                      _data[index].selected = true;
                  }
              })
          })
          this.setState({
             dataSource:_data
          })
      }
    };
    return (
        <Row className="coursewareContainer">
          <Col span={24}>
              <div className="head">
                  课件管理
              </div>
              <div className="content">
                  <div className="controlBtn">
                      <Button type="primary" icon="plus">添加课件</Button>
                      <Button type="ghost" className="marginL5" icon="delete">删除课件</Button>
                  </div>
                  <Table className="marginT10" rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource} />
              </div>
          </Col>
        </Row>
    )
  }
}
export default Form.create()(CourseWare);
